<template>

  <div >
    <!--内容区+侧边栏+头部-->
    <el-container>
      <!--侧边栏-->

      <el-aside
          :width="asideWidth"
          style="
          min-height: 100vh;
          background-color: #eeeeee ;
          margin-bottom: 5px;

          border-radius: 8px ;
          box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4);"
      >

        <div
            style="background: white;
            height: 65PX;
            width: 100%;
            line-height: 60PX;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;"
        >
          <img src="../assets/logo 11.png" alt="logo" style="height: 50px;width: 50px;border-radius: 8px;">

          <img src="../assets/logo 1.png" alt="logo"  class="logo-title"  v-show="!isCollapse">

        </div>
        <el-menu  :collapse="isCollapse" :collapse-transition="false" router style="background-color:#eeeeee" :default-active=  "$route.path">
          <el-menu-item index="/index1">
            <el-icon :size="20">  <House/></el-icon>
            <span style="margin-left: 2px">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/order1">
            <el-icon :size="20">  <Shop/></el-icon>
            <span style="margin-left: 2px">订单管理</span>
          </el-menu-item>

          <el-menu-item index="/member1" >
            <el-icon :size="20">  <Avatar/></el-icon>
            <span style="margin-left: 2px">会员管理</span>
          </el-menu-item>

          <el-menu-item index="/goods">
            <el-icon :size="20">  <DataBoard/></el-icon>
            <span style="margin-left: 2px">商品管理</span>
          </el-menu-item>

          <el-menu-item index="/data1">
            <el-icon :size="20">  <DataAnalysis/></el-icon>
            <span style="margin-left: 2px">数据分析</span>
          </el-menu-item>

          <el-sub-menu index="11">
            <template #title>
              <el-icon :size="20" style="margin-left: 5px"><setting/></el-icon>
              <span >个人中心</span>
            </template>

            <el-menu-item index="/self1" >个人信息</el-menu-item>
            <el-menu-item index="/change">密码修改</el-menu-item>
          </el-sub-menu>

        </el-menu>

      </el-aside>
      <!--内容区+头部-->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <!-- 折叠按钮-->
          <i  style="width: 26px;align-content: center;" @click="handleCollapse"> <Menu/> </i>

          <!--页眉栏-->
          <el-breadcrumb separator-class="el-icon-arrow-right" style="width:auto;align-content: center;margin-left: 10px">
            <el-breadcrumb-item :to="{path:'/index1'}">系统首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/order1'}">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/member1'}">会员管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/goods'}">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/data1'}">数据分析</el-breadcrumb-item>
            <el-breadcrumb-item >Doing</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 头像 -->
          <div style="flex:1;  display: flex; align-items: center;justify-content: flex-end;">
            <el-dropdown>
      <span >
        <img src="../assets/touxiang.png" alt="touxiang" style="height: 50px;width: 50px;">
        <span style="font-family: 华文楷体;font-size:20px">管理</span>
        <el-icon ><arrow-down /></el-icon>
      </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/self1')" target="_self">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="outAccount">退出账号</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

        </el-header>



        <!--内容区-->
        <el-main class="custom-main">
          <el-row>
          <div style="width: 600px; height: 400px;">
            <echarts :option="optionHistogram" />
          </div>
          <div style="width: 600px; height: 400px;">
            <echarts :option="optionkucun" />
          </div>
          </el-row>
          <el-row>
          <div style="width: 1000px; height: 600px;">
            <echarts :option="bingoption" />
          </div>
          </el-row>
        </el-main>

      </el-container>

    </el-container>

  </div>
</template>

<script setup>
import { Avatar, School, Share, Shop } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus';
import { ref, computed ,  onMounted } from 'vue';
import axios from "axios";
//导入登录控制

const activeName = ref('1');
const isCollapse = ref(false);
const asideWidth = ref('200px');
const HistogramData = ref([]);//柱状图
const kucunHistogramData = ref([]);//库存柱状图
const bingData = ref([]);//饼状图
const customerCounts = ref({}); // 用来存储每种会员类型的人数
// 使用computed能够使option自动响应data的变化而更新。
 const optionHistogram = computed(() => {
  const seriesData = [];//用于存储每种会员类型的人数。
  ["非会员", "普通会员", "白金会员","黄金会员"].forEach(type => {
    // 假设customerCounts中已经有了每种类型的人数
    seriesData.push(customerCounts.value[type] || 0);
  });

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    title: {
      text: '会员统计图'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ["非会员", "普通会员", "白金会员","黄金会员"],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '会员人数',
        type: 'bar',
        barWidth: '60%',
        data: seriesData
      }
    ]
  };
});

// 异步函数来获取数据并统计会员人数
onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:918/costomer/getall');
    HistogramData.value = response.data; // 存储原始数据

    // 初始化customerCounts
    customerCounts.value = {
      "非会员": 0,
      "普通会员": 0,
      "白金会员": 0,
      "黄金会员":0
    };

    // 统计每种会员类型的人数
    response.data.forEach(customer => {
      if (customer.costomerType) { // 确保costomerType存在
        customerCounts.value[customer.costomerType] = (customerCounts.value[customer.costomerType] || 0) + 1;
      }
    });
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
});
/*
使用了onMounted生命周期钩子来确保在组件挂载到DOM之后立即获取数据。
这是因为在组件挂载之前，DOM可能还未准备好，
而你可能需要等待DOM就绪才能进行某些操作
（尽管在这个特定的例子中可能不是必需的，但这是一个好习惯）
 */

//库存
//使用computed能够使option自动响应data的变化而更新。
const optionkucun = computed(() => {
  return ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    title: {
      text: '库存统计图'
    },
    xAxis: [
      {
        type: 'category',
        data: kucunHistogramData.value.map(item => item.commodityName),
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '库存',
        type: 'bar',
        barWidth: '60%',
        data: kucunHistogramData.value.map(item => item.commodityInventory),
      }
    ],
  })
});
// 异步函数来获取数据
onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:918/commodity/getall');
    kucunHistogramData.value = response.data; // 假设后端返回的数据格式与chartData的期望格式一致
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
});
/*
使用了onMounted生命周期钩子来确保在组件挂载到DOM之后立即获取数据。
这是因为在组件挂载之前，DOM可能还未准备好，
而你可能需要等待DOM就绪才能进行某些操作
（尽管在这个特定的例子中可能不是必需的，但这是一个好习惯）
 */


// 饼状图配置
const bingoption = computed(() => {
  return ({
    tooltip: {
      trigger: 'item', // 触发类型，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
      formatter: '{a} <br/>{b} : {c} ({d}%)', // 格式化显示的内容，{a}、{b}、{c}、{d}分别代表系列名、数据名、数据值、百分比
    },
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '会员分布',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: Object.keys(customerCounts.value).map(type => ({
          name: type,
          value: customerCounts.value[type]
        }))
      }
    ]
  });
});

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:918/costomer/getall');
    bingData.value = response.data; // 存储原始数据


    // 统计每种会员类型的人数
    response.data.forEach(customer => {
      if (customer.costomerType) { // 确保customerType存在且拼写正确
        customerCounts.value[customer.costomerType] = (customerCounts.value[customer.costomerType] || 0) + 1;
      }
    });
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
});


const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  asideWidth.value = isCollapse.value ? '64px' : '200px';
  ElMessage({
    message: isCollapse.value ? 'Collapsed' : 'Expanded',
    type: 'info'
  });
};
//退出账号
function outAccount() {
  window.sessionStorage.removeItem('token');
  window.location.href = '/';
}
// 导出响应式数据和方法
</script>
<style scoped>
/* 你可以在这里添加CSS样式 */
.el-menu-item:hover{
  color:#fff;
}

.el-menu-item{
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 8px ;
}
.custom-main {
  min-height: 100vh;
  background-color:#eeeeee;
  display: flex;
  height: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 8px ;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4); /* 右侧阴影效果 */
}

.logo-title{
  height: 50px;
  width: 140px;
  border-radius: 8px;
}

.el-header {
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.4); /* 右侧阴影效果 */
  display: flex;
  align-content: center;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 8px ;
}

</style>